<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    class="pop-table"
    :closable="false">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form" style="margin:30px 0">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="广告位置">
          <a-select v-decorator="['adPosition', {rules: [{ required: true, message: '请选择广告位置' }]}]" placeholder="请选择">
            <a-select-option value="1">采编首页</a-select-option>
            <a-select-option value="2">资讯活动</a-select-option>
            <a-select-option value="3">资讯文章</a-select-option>
            <a-select-option value="4">资讯专题</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="*资源路径">
          <!-- <a-input placeholder="请输入资源路径" v-decorator="['resourceUrl', {}]" />-->
          <!--          <image-upload v-model="adImageUrl"></image-upload>-->
          <j-image-upload v-model="adImageUrl"></j-image-upload>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="资源链接路径">
          <a-input placeholder="请输入资源链接路径"
                   v-decorator="['linkUrl', {rules: [{ required: true, message: '请输入资源链接路径' }]}]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="开始时间">
          <a-date-picker showTime format="YYYY-MM-DD HH:mm:ss"
                         v-decorator="[ 'beginDate', {rules: [{ required: true, message: '请选择开始时间' }]}]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="结束时间">
          <a-date-picker showTime format="YYYY-MM-DD HH:mm:ss"
                         v-decorator="[ 'endDate', {rules: [{ required: true, message: '请选择结束时间' }]}]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="排序">
          <a-input placeholder="请输入排序"
                   v-decorator="['sort', {rules: [{ pattern: new RegExp(/^[1-9]\d*$/, 'g'), message: '排序只能输入数字' }]}]"/>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import {httpAction} from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from 'moment'

  export default {
    name: 'BaseAdInfoModal',
    data() {
      return {
        title: '操作',
        visible: false,
        model: {},
        labelCol: {
          xs: {span: 24},
          sm: {span: 5}
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16}
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {
          adPosition: {rules: [{required: true, message: '请选择广告位置'}]}
        },
        url: {
          add: '/base/baseAdInfo/add',
          edit: '/base/baseAdInfo/edit'
        },
        adImageUrl: ''
      }
    },
    created() {
    },
    methods: {
      checkName(str) {
        const reg = /^[0-9]*$/
        return reg.test(str)
      },
      add() {
        this.edit({
          adPosition: '1'
        })
      },
      edit(record) {
        this.form.resetFields()
        if (record) {
          record.adPosition = String(record.adPosition)
        }
        this.model = Object.assign({}, record)
        this.visible = true
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'adPosition', 'linkUrl', 'sort'))
          // 时间格式化
          this.form.setFieldsValue({beginDate: this.model.beginDate ? moment(this.model.beginDate) : null})
          this.form.setFieldsValue({endDate: this.model.endDate ? moment(this.model.endDate) : null})
          this.adImageUrl = record.resourceUrl
        })
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleOk() {
        if (this.adImageUrl == null || this.adImageUrl == '') {
          this.$message.warning('资源路径不可为空，请上传资源')
        } else {
          const that = this
          // 触发表单验证
          this.form.validateFields((err, values) => {
            if (!err) {
              that.confirmLoading = true
              let httpurl = ''
              let method = ''
              if (!this.model.id) {
                httpurl += this.url.add
                method = 'post'
              } else {
                httpurl += this.url.edit
                method = 'put'
              }
              let formData = Object.assign(this.model, values)
              // 时间格式化
              formData.beginDate = formData.beginDate ? formData.beginDate.format('YYYY-MM-DD HH:mm:ss') : null
              formData.endDate = formData.endDate ? formData.endDate.format('YYYY-MM-DD HH:mm:ss') : null
              formData.resourceUrl = this.adImageUrl
              console.log(formData)
              httpAction(httpurl, formData, method).then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                } else {
                  that.$message.warning(res.message)
                }
              }).finally(() => {
                that.confirmLoading = false
                that.close()
              })
            }
          })
        }
      },
      handleCancel() {
        this.close()
      }

    }
  }
</script>

<style lang="less" scoped>

</style>
